<div class="home-container full-screen noshrink">
    <div class="home-title" fxLayout="row">
        <span fxFlex="29%" fxLayoutAlign="center center" class="title-item" (click)="setSort('name')">菜品名称<i [ngClass]="{'active':sortByLetter}" class="material-icons selected">arrow_drop_down</i></span>
        <span fxFlex="14%" fxLayoutAlign="center center" class="title-item">计划制作量</span>
        <span fxFlex="14%" fxLayoutAlign="center center" class="title-item">已制作量</span>
        <span fxFlex="14%" fxLayoutAlign="center center" class="title-item" (click)="setSort('count')">库存余量<i [ngClass]="{'active':!sortByLetter}" class="material-icons selected">arrow_drop_down</i></span>
        <span fxFlex="29%" fxLayoutAlign="center center" class="title-item">操作</span>
    </div>
    <div class="home-content" fxLayout="column">
        <y-scrollable-container (change)="pagingMessageChange($event)">
            <p *ngIf="!(list$ | async | notEmpty)" fxLayoutAlign="center center" class="h100 text-l color-gray">当前制作方案没有商品,请在“店铺管理”中设置</p>
            <div fxLayout="row" class="home-item" item *ngFor="let item of list$ | async;trackBy:trackBy">
                <span fxFlex="29%" fxLayoutAlign="start center" class="name save-warning" [ngClass]="{'save-danger':item.quantity && item.quantity<0,'save-normal':item.quantity&&item.quantity > 0}">
                    {{item.inventory.name}}
                    <span class="wait-checked" *ngIf="item.soldOutMode == 'stock-out' && item.quantity > 0">[卖完沽清]</span>
                <span class="checked" *ngIf=" ((item.soldOutMode == 'manual' &&item.isSoldOut)  || (item.soldOutMode == 'stock-out' && item.quantity <= 0))">[已沽清]</span>
                </span>
                <span fxFlex="14%" fxLayoutAlign="space-around center" class="padding">
                    <span fxFlex="50%" *ngIf="!item.inventoryProduceInfo" class="color-shadow">↓0</span>
                <span fxFlex="50%" *ngIf="item.inventoryProduceInfo" class="color-shadow word-break">↓{{item.inventoryProduceInfo.preProduceLower || 0}}</span>
                <span fxFlex="50%" *ngIf="!item.inventoryProduceInfo" class="color-shadow word-break">↑0</span>
                <span fxFlex="50%" *ngIf="item.inventoryProduceInfo" class="color-shadow">↑{{item.inventoryProduceInfo.preProduceUpper || 0}}</span>
                </span>
                <span fxFlex="14%" fxLayoutAlign="center center" class="padding color-shadow word-break">{{item.localProductQuantity?item.localProductQuantity:0}}</span>
                <span fxFlex="14%" class="padding" fxLayoutAlign="center center">
                    <span fxFlex="80%" class="remind-info save-warning text-l word-break" [ngClass]="{'save-danger':item.quantity && item.quantity<0,'save-normal':item.quantity&&item.quantity > 0}">{{item.quantity?item.quantity:0}}</span>
                </span>
                <span fxFlex="29%" fxLayoutAlign="space-between center" class="padding-s">
                    <button class="btn-primary" fxFlex="64%" *ngIf="!(item.soldOutMode=='stock-out' || (item.soldOutMode=='manual' && item.isSoldOut))" (click)="produce(item)">制作</button>
                    <button class="btn-normal" fxFlex="35%" *ngIf="!(item.soldOutMode=='stock-out' || (item.soldOutMode=='manual' && item.isSoldOut))" (click)="soldOut(item)">卖完沽清</button>
                    <button class="btn-normal" fxFlex="100%" *ngIf="item.soldOutMode=='stock-out' || (item.soldOutMode=='manual' && item.isSoldOut)" (click)="cancleSoldOut(item)">取消卖完沽清</button>
                </span>
            </div>
        </y-scrollable-container>
    </div>
</div>

<chef-make [foodItem]="foodItem" [producers]="producers" [selectedProducer]="selectedProducer" [produceCount]="produceCount"
    (close)="closeProduce($event)" *ngIf="isProducing"></chef-make>